<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body{
				margin: 0;
				background-color: #040d15;
			}
			h1{color: #fff;}
			.myinput{
				width: 300px;
				height: 50px;
				margin: 10px 0;
				outline: none;
				border: 1px solid #666;
				border-radius: 20px;
				padding-left: 15px;
				font-size: 18px;
			}
			.myinput:focus{
				border: 1px solid #FF6700;
			}
			#app{
				margin-top: 20px;
				display: flex;
				align-items: center;
				flex-direction: column;
			}
			.sum{
				width: 320px;
				height: 50px;
				border-radius: 20px;
				outline: none;
				background:none;
				color: #fff;
				border: 1px solid;
				font-size: 18px;
				margin: 5px 0;
			}
			.sum2{
				font-size: 14px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<Login v-if="defView" :register=""></Login>
			<Register v-if="!defView" @registering="RegisterSuccess"></Register>
			<button class="sum sum2" @click="defView = !defView">{{defView?"前往注册":"返回登录"}}</button>
		</div>
		
		
		<template id="Login">
			<div>
				<h1>登录</h1>
				<input class="myinput" type="text" placeholder="用户名" /><br />
				<input class="myinput" type="password" placeholder="密码" /><br />
				<button class="sum">登录</button>
			</div>
		</template>
		
		<template id="Register">
			<div>
				<h1>注册</h1>
				<input class="myinput" type="text" v-model="user.username"  placeholder="用户名" /><br />
				<input class="myinput" type="password" v-model="user.pwd"  placeholder="密码" /><br />
				<input class="myinput" type="password" v-model="user.pwd2"  placeholder="确定密码" /><br />
				<input class="myinput" type="email" v-model="user.email" placeholder="邮箱" /><br />
				<button class="sum" @click="Registering">注册</button>
			</div>
		</template>
		
		
		<script type="text/javascript">
			let Login = {
				template:"#Login"
			}
			let Register = {
				template:"#Register",
				data(){
					return {
						user:{}
					}
					
				},
				methods:{
					Registering(){
						this.$emit('registering',this.user)
					},
				
				}
			}
			
			var vm = new Vue({
				el:'#app',
				data:{
					defView:true
				},
				components:{
					Login,
					Register
				},
				methods:{
					RegisterSuccess(val){
						console.log(val);
					}
				}
				
			})
		</script>
	</body>
</html>
